<template>
  <div class="list-container">
    <div class="search-wrap clearfix">
      <div class="search-wrap-conditions fl marginL10">
        <el-select
          v-model="listQuery.condition.target"
          clearable
          placeholder="请选择查询对象"
          @change="resetPage"
        >
          <el-option
            v-for="item in sysTarget"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>

      <div class="search-wrap-conditions fl marginL10">
        <div class="block">
          <el-date-picker
            v-model="timer"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd HH:mm:ss"
            @change="resetPage"
          />
          <!-- <el-date-picker
            v-model="timer"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          />-->
        </div>
      </div>
      <div class="search-wrap-btn fr">
        <el-button :disabled="loading" @click="resetSearch">重置</el-button>
        <el-button :disabled="loading" type="primary" @click="resetPage">搜索</el-button>
        <el-button :disabled="loading" type="success" @click="dialogVisible = true">添加</el-button>
      </div>
    </div>
    <div class="main-wrapper">
      <custom-table :data="listData" :columns="columns" />
      <pagination :total="total" :page="listQuery.pager.page" @pagination="pagination" />
    </div>

    <el-dialog title="发送系统消息" :visible.sync="dialogVisible" width="600px">
      <el-form ref="ruleForm" :rules="rules" :model="ruleForm" label-width="80px">
        <el-form-item label="对象" prop="target">
          <el-col :span="20">
            <el-select v-model="ruleForm.target" clearable placeholder="请选择对象">
              <el-option
                v-for="item in sysTarget"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-col>
        </el-form-item>
        <el-form-item label="消息内容" prop="content">
          <el-col :span="20">
            <el-input
              v-model="ruleForm.content"
              resize="none"
              type="textarea"
              :rows="5"
              placeholder="请输入内容"
            />
          </el-col>
        </el-form-item>

        <el-form-item label="链接">
          <el-col :span="20">
            <el-input v-model.number="ruleForm.url" placeholder="请输入跳转链接" />
          </el-col>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="saveBtn('ruleForm')">发 送</el-button>
        <el-button @click="dialogVisible = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { sysTarget } from './data';

import CustomTable from '@/components/CustomTable/index';
import Pagination from '@/components/Pagination/index';
import { sysLeaveWordPage, sysLeaveWordSend } from '@/api/news';

export default {
  name: 'System',
  components: {
    CustomTable,
    Pagination
  },
  data () {
    return {
      sysTarget: sysTarget,

      dialogVisible: false,
      ruleForm: {
        content: '', // 消息内容
        target: null, // 对象
        url: '' // 链接
      },
      rules: {
        content: [
          { required: true, message: '请输入消息内容!', trigger: 'blur' }
        ],
        target: [{ required: true, message: '请选择对象!', trigger: 'change' }],
        url: [{ required: true, message: '请输入跳转链接!', trigger: 'blur' }]
      },

      loading: false,
      timer: [],
      listQuery: {
        condition: {
          startTime: null,
          endTime: null,
          target: null
        },
        pager: {
          page: 1,
          pageSize: 10
        }
      },
      listData: [],
      total: 0,
      columns: [
        { label: '序号', value: 'index', width: '60px', align: 'center' },
        { label: '消息内容', value: 'content', width: '300px' },
        { label: '链接', value: 'url', width: '300px', align: 'center' },
        { label: '类型', value: 'type', align: 'center' },
        { label: '对象', value: 'target', align: 'center' },
        { label: '时间', value: 'createTime', align: 'center' }
      ]
    };
  },
  created () {
    this.init();
  },
  methods: {
    resetPage () {
      this.listQuery.pager.page = 1;
      this.listQuery.pager.pageSize = 10;
      this.init();
    },
    init () {
      this.listQuery.condition.startTime = this.timer.length > 0 && this.timer[0] ? this.timer[0] : '';
      this.listQuery.condition.endTime = this.timer.length > 0 && this.timer[1] ? this.timer[1] : '';
      this.loading = true;
      sysLeaveWordPage(this.listQuery)
        .then(res => {
          console.log(res.data);
          const data = res.data;
          this.listData = data.records;
          this.total = data.total;
          this.loading = false;
        })
        .catch(error => {
          this.loading = false;
        });
    },
    resetSearch () {
      this.listQuery = {
        condition: {
          startTime: null,
          endTime: null,
          target: null
        },
        pager: {
          page: 1,
          pageSize: 10
        }
      };
      this.timer = [];
      this.init();
    },
    pagination ({ page, limit }) {
      this.listQuery.pager.page = page;
      this.listQuery.pager.pageSize = limit;
      this.init();
    },

    saveBtn (formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          // console.log('submit!');
          sysLeaveWordSend(this.ruleForm).then(res => {
            console.log(res.data);
            this.resetSearch();
            this.dialogVisible = false;
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
      //       var birthday = new Date("July 21, 1983 01:15:00")
      // document.write(birthday.getDate())
    }
  }
};
</script>

<style lang="scss" scoped></style>
